<template>
<div class="systemGallery">
  <search-block>
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-button type="primary" @click="addPic">添加图片</el-button>
    </template>
    <el-form inline :model="model" label-width="100px" @submit.native.prevent>
      <el-form-item label="业务模块:">
        <y-code-select
          v-model="model.businessType"
          clearable
          dict="SYSTEM_LIB_MODULE_TYPE"></y-code-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="picUrl" label="图片" align="center" header-align="center" min-width="120">
      <template v-slot="{row}">
        <el-image
          v-if="row.picUrl"
          style="max-width: 100px"
          fit="contain"
          :src="generateMediaUrl({ fileOpenUrl: row.picUrl })"
          :preview-src-list="[ generateMediaUrl({ fileOpenUrl: row.picUrl }) ]">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="160">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="editPic(row)">编辑</el-button>
          <el-popconfirm
              title="是否确认删除该图片？"
              @confirm="delPic(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    ref="yForm"
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    width="50%"
    :form-attrs="forms.formAttrs"
    :columns="formColumns"
    @ensure="ensureModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "systemGallery",
  inject: ['getDictNameSync', 'generateMediaUrl'],
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.system.systemPicturePage,
        param: this.model
      }
    },
    formColumns(){
      return [
        {
          label: "业务模块",
          prop: "businessType",
          comp:{
            compType: 'YCodeSelect',
            attrs:{
              dict: 'SYSTEM_LIB_MODULE_TYPE'
            }
          }
        },
        {
          label: "图片",
          prop: "picUrl",
          comp:{
            compType: 'YUploadImg',
            attrs:{
              url: this.forms.formModel.picUrl ? [{
                url: this.forms.formModel.picUrl,
                id: this.forms.formModel.picId
              }] : [],
              valueType: "ObjectArray",
              businessSysModuleCode: "SYSTEM_LIB_MODULE",
              limit: 1,
              reUpload: true,
              cropperOptions:{
                //物品图锁1:1
                fixed: this.forms.formModel.businessType === 'SYSTEM_LIB_ADOPT',
                fixedNumber: this.forms.formModel.businessType === 'SYSTEM_LIB_ADOPT' ? [1, 1] : undefined,
                centerBox: false
              }
            },
            listeners:{
              update: this.updateModel
            }
          }
        },
        {
          label: "排序",
          prop: "sort",
          comp:{
            compType: 'input-number',
            attrs:{
              stepStrictly: true
            }
          }
        }
      ];
    }
  },
  data(){
    return{
      model:{
        businessType: ''
      },
      columns: [
        {
          label: "业务模块",
          prop: "businessType",
          formatter: (function(row){
            return this.getDictNameSync(row.businessType, 'SYSTEM_LIB_MODULE_TYPE');
          }).bind(this)
        },
        {
          prop: "picUrl",
          template: true
        },
        {
          label: "排序",
          prop: "sort"
        }
      ],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加图片',
          'EDIT': '编辑图片'
        },
        formModel:{
          businessType: '',
          picId: '',
          picUrl: '',
          sort: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            businessType: [{required: true, message: "请选择业务模块", trigger: "change"}],
            picUrl: [{required: true, message: "请选择图片", trigger: "change"}]
          }
        }
      }
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    addPic(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    editPic(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delPic(row){
      this.$yAxios({
        url: this.$api.system.removeSystemPicture,
        data:{
          ids: [row.id]
        }
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    updateModel({type, file}){
      switch(type) {
        case 'delete': {
          this.forms.formModel.picId = '';
          this.forms.formModel.picUrl = '';
          break;
        }
        case 'edit': case 'add':{
          this.forms.formModel.picId = file.id;
          this.forms.formModel.picUrl = file.name;
          this.$refs['yForm'].$refs['form'].validateField('picUrl');
          break;
        }
      }
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({}, form);
      }
      this.$yAxios({
        url: this.$api.system.saveSystemPicture,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
      })
    },
  }
}
</script>

<style scoped>

</style>
